//仓库管理
import React,{useState,useEffect} from 'react';
import Table from '../../../components/packagingPopup/LmdTable';
import '../../../scss/lmd/WarehouseManagement.scss'
import { warehousemanagement_table,WarehouseManagement_search,warehousemanagement_patch } from '../../../tools/api';
import { Button, Modal,Input,Form ,Select, message, Space } from 'antd';

function WarehouseManagement(props) {
    var [SelectChange,setSelectChange]=useState([])
    var [dataSource,setdataSource]=useState([])
    var [status,setstatus]=useState(4)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    const [option,setoption]=useState([])
    const [num1,setnum1]=useState(0)
    const [num2,setnum2]=useState(0)
    var [loading,setloading]=useState(false);
    const [messageApi, contextHolder] = message.useMessage();

    const success = () => {
        messageApi.open({
          type: 'success',
          content: '移库操作成功',
        });
      };
      const error = () => {
        messageApi.open({
          type: 'error',
          content: '请选择2个仓库',
        });
      };
    useEffect(()=>{
        datasource()
    },[])
    var datasource=()=>{
        warehousemanagement_table().then((res)=>{
            setdataSource(res.data)
        });
    }

    // 切换表格
    var changetable=()=>{
        if(status==4){
            setstatus(5);
        }else{
            setstatus(4);
        }
    }
    // 搜索
    var search=()=>{
        setIsModalOpen(true)
    }
    const handleCancel = () => {
        setIsModalOpen(false);
        setIsModalOpen1(false)
    };
    const onFinish=(value)=>{
        WarehouseManagement_search({Warehouse_like:value.Warehouse,region_like:value.region,type_like:value.type,name_like:value.name,brand_like:value.brand}).then((res)=>{
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
            setdataSource(res.data)
            setIsModalOpen(false);
        })
    }

    // 移库操作
    const move=()=>{
        if(SelectChange.length===2){
            WarehouseManagement_search({id:SelectChange[0]}).then((res)=>{
                option.push({label:res.data[0].Warehouse, value: SelectChange[0]})
                setnum1(Number(res.data[0].number) )
            })
            WarehouseManagement_search({id:SelectChange[1]}).then((res)=>{
                option.push({label:res.data[0].Warehouse, value: SelectChange[1]})
                setnum2(Number( res.data[0].number))
            })
            setTimeout(()=>{setIsModalOpen1(true)},500)
        }else{
            error()
        }
    }
    
    const onFinish1=(value)=>{
        var a=num1-value.number;
        var b=num2/1+value.number/1;
        setloading(true);
        setTimeout(() => {
            setloading(false)
        }, 500);
        if(value.Warehouseout){
            warehousemanagement_patch((value.Warehouseout),{number:a}).then((res)=>{}) 
            warehousemanagement_patch((value.Warehousein),{number:b}).then((res)=>{}) 
        }
        setIsModalOpen1(false);
        datasource()
        success()
    }

    // 单选框
    const getonSelectChange = (SelectChange) => {
        setSelectChange(SelectChange)
    };
    return (
        <div id='warehousemanagement'>
            {contextHolder}
            <div className='warehousemanagement'>
                <div className='title'>操作选项</div>
                <div className='options'>
                    <div className='zu'>
                        <div className='button1' onClick={()=>{search()}}>数据筛选</div>
                        <div className='button1' onClick={()=>{move()}} >移库</div>
                    </div>
                    <div className='button1' onClick={changetable}>{status==4?'按商品显示':'按库位显示'}
                        
                    </div>
                </div>
            </div>
            <Table dataSource={dataSource} status={status} getOnSelectChange={getonSelectChange} loading={loading}/>
            {/* 数据查询 */}
            <Modal title="数据筛选" open={isModalOpen}   footer={[]}>
            <Form
                name="basic"
                className='basic'
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                >
                <div className='zhan' style={{height:20}}></div>
                <Form.Item
                    name="Warehouse"
                    label='所属仓库'
                >
                    <Input placeholder='请输入所属仓库' />
                </Form.Item>
                <Form.Item
                    name="region"
                    label='所属区域'
                >
                    <Input placeholder='请输入所属区域  ' />
                </Form.Item>
                <Form.Item
                    name="type"
                    label='商品品类'
                >
                    <Input placeholder='请输入商品品类  ' />
                </Form.Item>
                <Form.Item
                    name="name"
                    label='商品名称'
                >
                    <Input placeholder='请输入商品名称  ' />
                </Form.Item>
                <Form.Item
                    name="brand"
                    label='商品品牌'
                >
                    <Input placeholder='请输入商品品牌  ' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={onFinish} style={{marginRight:20+'px'}}>
                        筛选
                    </Button>
                    <Button onClick={handleCancel} style={{marginLeft:20+'px'}}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
            </Modal>

             {/* 移库 */}
             <Modal title="移库操作" open={isModalOpen1}   footer={[]}>
            <Form
                name="basic"
                className='basic'
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                onFinish={onFinish1}
                >
                <div className='zhan' style={{height:20}}></div>

                <Form.Item
                    name="number"
                    label='移出数量'
                >
                    <Input placeholder='请输入移出数量  ' />
                </Form.Item>
                <Form.Item
                    name="Warehouseout"
                    label='移出库位'
                >
                    <Select
                        style={{ width: 120 }}
                        options={option}
                    />
                </Form.Item>
                <Form.Item
                    name="Warehousein"
                    label='移入库位'
                >
                    <Select
                        style={{ width: 120 }}
                        options={option}
                        />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={onFinish1} style={{marginRight:20+'px'}}>
                        确认移动
                    </Button>
                    <Button onClick={handleCancel} style={{marginLeft:20+'px'}}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
            </Modal>
        </div>
    );
}

export default WarehouseManagement;